<template>
  <up-navbar title="" :bgColor="bgColor" height="50" fixed placeholder>
    <template #left>
      <text>书法展览</text>
    </template>
  </up-navbar>
  <view class="content">
    <up-notice-bar :text="loading ? '正在加载公告...' : noticeText" mode="closable"></up-notice-bar>
    <!--banner-->
    <uni-swiper-dot :info="bannerList" :current="currentBanner" :mode="mode" :dots-styles="dotsStyles">
      <swiper class="swiper-box" @change="changeBanner">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view class="swiper-item">
            <!-- 顶部展示区 -->
            <view class="banner">
              <image :src="item.url" class="banner-poster" mode="fit"></image>
              <view class="gallery-link" @click="goExhibition(item)">
                <text class="gallery-text">前往看展</text>
                <text class="arrow">→</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view style="height: 5px" />
    <!-- 功能入口区 -->
    <view class="menus">
      <up-grid :border="false" :col="menuList.length" grid="1">
        <up-grid-item customStyle="padding-left: 20rpx; padding-right: 20rpx" v-for="(listItem, listIndex) in menuList"
          :key="listIndex" @click="handleFeatureClick(listItem)">
          <up-image :src="listItem.icon" width="80rpx" height="80rpx"></up-image>
          <text class="grid-text">{{ listItem.label }}</text>
        </up-grid-item>
      </up-grid>
    </view>
    <view style="height: 6px" />
    <!-- 列表区 -->
    <view>
      <view class="gallery-list-title">
        <text>最新展览</text>
      </view>
      <up-sticky bgColor="#fff" customNavHeight="96">
        <up-tabs :list="galleryTypeTabs" :scrollable="false" @change="onTabChange"></up-tabs>
      </up-sticky>
      <view>
        <!-- 使用新创建的展厅列表组件 -->
        <GalleryList :list-data="galleryListData" :isLoading="galleryPagination.loading" @item-click="goExhibition"></GalleryList>
        <up-loadmore height="30vh" :status="status" />
      </view>
    </view>

    <!-- 悬浮AI助手按钮 -->
    <floating-ai-btn :bottomOffset="tabBarHeight + 10" :showTip="showAiTip" :tipMessage="aiTipMessage"
      @click="handleAiBtnClick">
    </floating-ai-btn>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import { usePagination } from "alova/client";
import Apis from "@/api";
import FloatingAiBtn from "@/components/floating-ai-btn/floating-ai-btn.vue";
import GalleryList from "@/components/gallery-list/gallery-list.vue";

// 背景颜色
const bgColor = ref("#fff");
// 当前选中的tab索引
const currentTabIndex = ref(0);

// 修改galleryTypeTabs，添加category字段用于区分不同类型
const galleryTypeTabs = reactive([
  { name: "少儿", category: 1 },
  { name: "艺术", category: 2 },
  { name: "比赛", category: 3 },
]);

// 公告数据
const {
  data: noticeData,
  loading,
  error: noticeError,
} = usePagination(
  () => Apis.wx_notice.listNotice({ params: { pageNum: 1, pageSize: 1 } }),
  {
    initialData: { rows: [] },
    immediate: true,
    data: (res) => res.rows,
  }
);
// 公告文本
const noticeText = computed(() => {
  if (noticeError.value) {
    return "公告加载失败";
  }
  if (noticeData.value && noticeData.value.length > 0) {
    // 返回公告标题或内容
    const notice = noticeData.value[0];
    return notice.noticeTitle + " " + notice.noticeContent || "暂无公告内容";
  }
  return "暂无公告";
});

// 修改展厅列表数据请求 - 根据tab类型请求不同数据
const galleryPagination = usePagination(
  (page, pageSize) => {
    // 根据当前tab类型构建请求参数
    const params = { pageNum: page, pageSize };
    const currentTab = galleryTypeTabs[currentTabIndex.value];

    // 根据tab类型添加category参数
    if (currentTab && currentTab.category) {
      params.category = currentTab.category;
    }
    return Apis.wx_gallery.getGalleryList({ params });
  },
  {
    initialData: { rows: [], total: 0 },
    immediate: true,
    append: true,
    preloadNextPage: false, // 关闭预加载下一页数据
    data: (res) => res.rows,
    total: (res) => res.total,
  }
);

const {
  data: galleryListData,
  page,
  total: galleryTotal,
  isLastPage,
} = galleryPagination;

// 上拉加载更多展厅数据
onReachBottom(() => {
  // 触发加载更多展厅数据
  if (!isLastPage.value) {
    page.value++;
  }
});

// 加载状态
const status = computed(() => {
  if (galleryPagination.loading.value) return "loading";
  if (galleryPagination.error.value) return "error";
  if (galleryTotal > 0 && !isLastPage.value) return "loadmore";
  return "nomore";
});

// 轮播图数据
const bannerList = ref([
  {
    galleryId: 1,
    url: "https://img.cdn1.vip/i/691acdea9775b_1763364330.webp",
    content: "内容 A",
  },
  {
    galleryId: 1,
    url: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    content: "内容 B",
  },
  {
    galleryId: 1,
    url: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    content: "内容 C",
  },
]);

const currentBanner = ref(0);
const mode = ref("default");
const dotsStyles = reactive({
  bottom: "10rpx",
  dotColor: "rgba(255, 255, 255, .5)",
  activeDotColor: "#ffffff",
  dotSize: "12px",
  activeDotSize: "16px",
});
const menuList = ref([
  {
    label: "名作赏析",
    icon: "/static/menu/works-appreciation.png",
    url: "/gallery_pages/artwork/list",
  },
  {
    label: "学生作品",
    icon: "/static/menu/works.png",
    url: "/service_pages/member/index",
  },
  {
    label: "名师课程",
    icon: "/static/menu/vip-course.png",
    url: "/gallery_pages/course/list",
  },
  {
    label: "会员专享",
    icon: "/static/menu/vip-exclusive.png",
    url: "/service_pages/member/index",
  },
]);

// AI悬浮按钮相关数据
const tabBarHeight = ref(80); // 底部导航栏高度
const showAiTip = ref(true); // 是否显示AI提示
const aiTipMessage = ref("有什么书法问题想问我吗？");

function changeBanner(e) {
  currentBanner.value = e.detail.current;
}

// 跳转到展厅详情页
const goExhibition = (data) => {
  uni.navigateTo({
    url: "/gallery_pages/gallery/detail?galleryId=" + data.galleryId,
  });
};

// 处理功能区点击
function handleFeatureClick(item) {
  if (item.url) {
    uni.navigateTo({
      url: item.url,
      fail: (err) => {
        console.error("跳转失败:", err);
        uni.showToast({ title: "页面跳转失败", icon: "none" });
      },
    });
  }
}

// 处理AI悬浮按钮点击
const handleAiBtnClick = () => {
  // 隐藏提示气泡
  showAiTip.value = false;

  // 显示点击反馈
  uni.showToast({
    title: "启动AI助手",
    icon: "success",
    duration: 1500,
  });

  console.log("AI助手按钮被点击");
};

// tab切换处理函数
function onTabChange(index) {
  // 更新当前选中的tab索引
  currentTabIndex.value = index.index;
  // 重置分页信息
  page.value = 1;
  // 清空现有数据
  galleryListData.value = [];
  // 重新请求数据
  galleryPagination.refresh();
}

onMounted(() => {
  // 页面加载时的逻辑

  // 延迟显示AI提示气泡
  setTimeout(() => {
    showAiTip.value = true;
  }, 3000);

  // 10秒后自动隐藏提示
  setTimeout(() => {
    showAiTip.value = false;
  }, 13000);

  // 检查是否是第一次访问，设置不同的提示消息
  const isFirstTime = uni.getStorageSync("isFirstTime");
  if (!isFirstTime) {
    aiTipMessage.value = "欢迎使用！我是书法AI助手🤖";
    uni.setStorageSync("isFirstTime", true);
  } else {
    const tipMessages = [
      "有什么书法问题想问我吗？",
      "想了解更多书法知识吗？",
      "需要书法学习指导吗？",
      "让我来帮你介绍作品吧！",
    ];
    const randomIndex = Math.floor(Math.random() * tipMessages.length);
    aiTipMessage.value = tipMessages[randomIndex];
  }
});
</script>
<style lang="scss" scoped>
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

.content {
  padding: 10rpx 10rpx 36rpx;
  background: #f5f6fa;
}

.swiper-box {
  // padding: 10rpx;
  height: 400rpx;
  background: #fff;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 380rpx;
  color: #fff;
}

/* 前往看展链接样式 */
.gallery-link {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  display: flex;
  align-items: center;
  padding: 12rpx 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  padding: 10rpx 20rpx;
  border-radius: 36rpx;
}

.gallery-link:hover {
  transform: scale(1.05);
}

.gallery-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.arrow {
  color: #ffd700;
  font-size: 32rpx;
  margin-left: 10rpx;
  animation: bounce 1s infinite;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5rpx);
  }
}

.banner {
  width: 100%;
  display: flex;
  margin-bottom: 0rpx;
  position: relative;
}

.banner-poster {
  width: 100%;
  height: 360rpx;
  border-radius: 12rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

/* 底部功能区 */
.menus {
  padding: 10rpx 0 0 0;
  background: #fff;
}

.gallery-list-title {
  background: #fff;
  padding-left: 30rpx;
  padding-top: 20rpx;
}
</style>
